<template>
  <div>
    <div class="body">
      <Welcome :msg="msg" />
      <SocketSwitch :socket="socket" />
      <SocketRoom :socket="socket" />
      <SocketInformationBar :socket="socket" />
      <SocketSendMassege :socket="socket" />
    </div>
  </div>
</template>

<script>
  import {
      Welcome,
      SocketInformationBar,
      SocketSendMassege,
      SocketSwitch,
      SocketRoom,
  } from "../components/common";
  import io from 'socket.io-client';

export default {
  name: 'HelloWorld',
  components: {
      Welcome,
      SocketInformationBar,
      SocketSendMassege,
      SocketSwitch,
      SocketRoom,
  },
  props: {
    msg: String
  },
    data(){
      return {
          socket: null,
          message: null,
      }
    },
    methods:{
    },
    mounted(){
        const {protocol, hostname}= window.location;
        console.log('protocol:',protocol)
        console.log('hostname:', hostname)
        var url= protocol+"//"+ hostname+":7001"
        this.$data.socket= io(url)
        this.$data.socket.on('reconnect', ()=>{
            console.log('reconnect:')
            this.$data.socket= io(url)
        });
        this.$data.socket.on('connect', ()=>{
            console.log('connect:')
        });
        this.$data.socket.on('disconnect', function(e){
            console.log('disconnect:',e)
        });
        this.$data.socket.onclose=()=>{
            console.log('onclose')
        };
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
